{extend name="default/template/base_index" /}

{block name="area_header"}
    <link rel="stylesheet" href="__CDN__/codemirror/5.4/lib/codemirror.css">
    <link rel="stylesheet" href="__CDN__/codemirror/5.4/theme/mbo.css">
    <style>
        .CodeMirror, #preview_window {
            width: 700px;
            height: 500px;
        }

        #preview_window.loading {
            background: url('__CDN__/common/loading.gif') no-repeat center;
        }

        #preview_window textarea {
            display: none;
        }
    </style>
{/block}
{block name="area_body"}

    {include file="default/Widget/topbar" /}
    <div class="admin-main container-fluid">
        {include file="default/Widget/left" /}
        <div class="admin-main-content">
            {include file="default/Widget/breadcrumb" /}

            <h2>插件快速创建</h2>
            <!-- 表单 -->
            <form id="form" action="{:url('Addons/build')}" method="post" class="form-horizontal doc-modal-form">

                <div class="form-group">
                    <label class="control-label  col-lg-2 col-md-2" >&nbsp;</label>

                    <div class="col-lg-10 col-md-10" >
                        <button class="btn btn-sm btn-primary" type="button" id="preview">预 览</button>
                        <button class="btn btn-sm ajax-post_custom submit-btn" target-form="form-horizontal" id="submit">确 定
                        </button>
                        <button class="btn btn-sm btn-default" onclick="javascript:history.back(-1);return false;">返 回</button>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-lg-2 col-md-2"><span class="must">*</span>标识名 <span
                            class="check-tips">（请输入插件标识）</span></label>

                    <div class="col-md-10 col-lg-10">
                        <input type="text" class="text form-control input-large" name="info[name]" value="Example">
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-lg-2 col-md-2">插件名<span class="check-tips">（请输入插件名）</span></label>

                    <div class="col-md-10 col-lg-10">
                        <input type="text" class="text input-large" name="info[title]" value="示列">
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-lg-2 col-md-2">版本<span class="check-tips">（请输入插件版本）</span></label>

                    <div class="col-md-10 col-lg-10">
                        <input type="text" class="text form-control  input-large" name="info[version]" value="0.1">
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-lg-2 col-md-2">作者<span class="check-tips">（请输入插件作者）</span></label>

                    <div class="col-md-10 col-lg-10">
                        <input type="text" class="text form-control input-large" name="info[author]" value="无名">
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-lg-2 col-md-2">描述<span class="check-tips">（请输入描述）</span></label>

                    <div class="col-md-10 col-lg-10">
                            <textarea class="form-control "   name="info[description]">这是一个临时描述</textarea>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-lg-2 col-md-2">安装后是否启用</label>

                    <div class="col-md-10 col-lg-10">
                        <label class="checkbox">
                            <input type="checkbox" name="info[status]" value="1" checked/>
                        </label>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-lg-2 col-md-2">是否需要配置</label>

                    <div class="col-md-10 col-lg-10">
                        <label class="checkbox"><input type="checkbox" id="has_config" name="has_config"
                                                       value="1"/></label>
                        <label class="textarea input-large has_config hidden">
					<textarea class="form-control" rows="5" name="config">
&lt;?php
return array(
	'random'=>array(//配置在表单中的键名 ,这个会是config[random]
		'title'=>'是否开启随机:',//表单的文字
		'type'=>'radio',		 //表单的类型：text、textarea、checkbox、radio、select等
		'options'=>array(		 //select 和radion、checkbox的子选项
			'1'=>'开启',		 //值=>文字
			'0'=>'关闭',
		),
		'value'=>'1',			 //表单的默认值
	),
);
					</textarea>
                        </label>
                        <input type="text" class="text input-large has_config hidden" name="custom_config">
                        <span class="check-tips has_config hidden">自定义模板,注意：自定义模板里的表单name必须为config[name]这种，获取保存后配置的值用$data.config.name</span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-lg-2 col-md-2">是否需要外部访问</label>
                    <div class="col-md-10 col-lg-10">
                        <label class="checkbox">
                        <input type="checkbox" class="checkbox" name="has_outurl" value="1"/>

                        </label>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-lg-2 col-md-2">实现的钩子方法</label>

                    <div class="col-md-10 col-lg-10">
                        <select class="select form-control" name="hook[]" size="10" multiple required>
                            <volist name="Hooks" id="vo">
                                <option value="{$vo.name}" title="{$vo.description}">{$vo.name}</option>
                            {/volist}
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-md-2 col-lg-2">是否需要后台列表</label>

                    <div class="col-md-10 col-lg-10">
                        <label class="checkbox">
                            <input type="checkbox" id="has_adminlist" name="has_adminlist" value="1"/>勾选，扩展里已装插件后台列表会出现插件名的列表菜单，如系统的附件
                        </label>
                        <label class="textarea input-large has_adminlist hidden">
					<textarea name="admin_list" rows="5">
'model'=>'Example',		//要查的表
			'fields'=>'*',			//要查的字段
			'map'=>'',				//查询条件, 如果需要可以再插件类的构造方法里动态重置这个属性
			'order'=>'id desc',		//排序,
			'list_grid'=>array( 		//这里定义的是除了id序号外的表格里字段显示的表头名和模型一样支持函数和链接
                'cover_id|preview_pic:封面',
                'title:书名',
                'description:描述',
                'link_id|get_link:外链',
                'update_time|time_format:更新时间',
                'id:操作:[EDIT]|编辑,[DELETE]|删除'
            ),
					</textarea>
                        </label>
                        <input type="text" class="text has_adminlist hidden" name="custom_adminlist">
                        <span class="check-tips block has_adminlist hidden">自定义模板,注意：自定义模板里的列表变量为$_list这种,遍历后可以用listkey可以控制表头显示,也可以完全手写，分页变量用$_page</span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label  col-lg-2 col-md-2" >&nbsp;</label>

                    <div class="col-lg-10 col-md-10" >
                        <button class="btn btn-sm btn-primary" type="button" id="preview">预 览</button>
                        <button class="btn btn-sm ajax-post_custom submit-btn" target-form="form-horizontal" id="submit">确 定
                        </button>
                        <button class="btn btn-sm btn-default" onclick="javascript:history.back(-1);return false;">返 回</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
{/block}

{block name="area_footer"}
    <script type="text/javascript" src="__CDN__/codemirror/5.4/lib/codemirror.js"></script>
    <script type="text/javascript" src="__CDN__/codemirror/5.4/mode/xml/xml.js"></script>
    <script type="text/javascript" src="__CDN__/codemirror/5.4/mode/javascript/javascript.js"></script>
    <script type="text/javascript" src="__CDN__/codemirror/5.4/mode/clike/clike.js"></script>
    <script type="text/javascript" src="__CDN__/codemirror/5.4/mode/php/php.js"></script>

    <script type="text/javascript" src="__CDN__/jquery-thinkbox/1.0/jquery.thinkbox.js"></script>

    <script type="text/javascript">
        function bindShow(radio_bind, selectors) {
            $(radio_bind).click(function () {
                $(selectors).toggleClass('hidden');
            })
        }

        //配置的动态
        bindShow('#has_config', '.has_config');
        bindShow('#has_adminlist', '.has_adminlist');

        $('#preview').click(function () {
            var preview_url = '{:url("preview")}';
            console.log($('#form').serialize());
            $.post(preview_url, $('#form').serialize(), function (data) {
                $.thinkbox('<div id="preview_window" class="loading"><textarea></textarea></div>', {
                    afterShow: function () {
                        var codemirror_option = {
                            lineNumbers: true,
                            matchBrackets: true,
                            mode: "application/x-httpd-php",
                            indentUnit: 4,
                            gutter: true,
                            fixedGutter: true,
                            indentWithTabs: true,
                            readOnly: true,
                            lineWrapping: true,
                            height: 500,
                            enterMode: "keep",
                            tabMode: "shift",
                            theme: "mbo"
                        };
                        var preview_window = $("#preview_window").removeClass(".loading").find("textarea");
                        var editor = CodeMirror.fromTextArea(preview_window[0], codemirror_option);
                        editor.setValue(data);
                        $(window).resize();
                    },

                    title: '预览插件主文件',
                    unload: true,
                    actions: ['close'],
                    drag: true
                });
            });
            return false;
        });

        $('.ajax-post_custom').click(function () {
            var target, query, form;
            var target_form = $(this).attr('target-form');
            var check_url = "{:url('checkForm')}";
            $.ajax({
                type: "POST",
                url: check_url,
                dataType: 'json',
                async: false,
                data: $('#form').serialize(),
                success: function (data) {
                    if (data.status) {
                        if (($(this).attr('type') == 'submit') || (target = $(this).attr('href')) || (target = $(this).attr('url'))) {
                            form = $('.' + target_form);
                            if (form.get(0).nodeName == 'FORM') {
                                target = form.get(0).action;
                                query = form.serialize();
                            } else if (form.get(0).nodeName == 'INPUT' || form.get(0).nodeName == 'SELECT' || form.get(0).nodeName == 'TEXTAREA') {
                                query = form.serialize();
                            } else {
                                query = form.find('input,select,textarea').serialize();
                            }
                            $.post(target, query).success(function (data) {
                                if (data.status == 1) {
                                    if (data.url) {
                                        $.scojs_message(data.info + ' 页面即将自动跳转~', $.scojs_message.TYPE_OK);
                                    } else {
                                        $.scojs_message(data.info + ' 页面即将自动跳转~', $.scojs_message.TYPE_OK);

                                    }
                                    setTimeout(function () {
                                        if (data.url) {
                                            location.href = data.url;
                                        } else {
                                            location.reload();
                                        }
                                    }, 1500);
                                } else {
                                    $.scojs_message(data.info, $.scojs_message.TYPE_OK);
                                }
                            });
                        }
                    } else {
                        $.scojs_message(data.info, $.scojs_message.TYPE_OK);
                    }
                }
            });

            return false;
        });

        //导航高亮
//        highlight_subnav("{:url('Addons/index')}");
    </script>
{/block}
